<template>
	<view class="content">
		<view class="poster-box y-f">
			<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
			<view class="share-box" v-if="poster.finalPath">
				<view class="share-list-box x-f">
					<button class="share-btn share-item y-f" open-type="share">
						<image class="share-img" :src="$IMG_URL + '/share_wx.png'" mode=""></image>
						<text class="share-title">微信好友</text>
					</button>
					<view class="share-item y-f" @tap="saveImage">
						<image class="share-img" :src="$IMG_URL + '/share_poster.png'" mode=""></image>
						<text class="share-title">保存图片</text>
					</view>
				</view>
			</view>
		</view>
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="store_poster" :style="{ width: (poster.width || 1) + 'px', height: (poster.height || 1) + 'px' }"></canvas>
		</view>
	</view>
</template>

<script>
import _app from '@/common/utils/QS-SharePoster/app.js';
import { getSharePoster } from '@/common/utils/QS-SharePoster/QS-SharePoster.js';
import { BASE_URL } from '@/env.js';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {},
	data() {
		return {
			poster: {},
			qrShow: false,
			canvasId: 'store_poster'
		};
	},
	props: {},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			shareData: state => state.init.initData.share
		})
	},
	async created() {
		let that = this;
		let storeInfo = await that.getStoreDetail();
		that.setShareInfo({
			title: that.storeInfo.name,
			image: that.storeInfo.image_first,
			query: {
				url: 'store-' + that.storeInfo.id
			}
		});

		if (that.shareInfo) {
			setTimeout(() => {
				that.$emit('getShareInfo', that.shareInfo);
				that.scene = encodeURIComponent(that.shareInfo.path.split('?')[1]);
				that.shareFc();
			}, 100);
		}
	},
	methods: {
		async shareFc() {
			let that = this;
			try {
				const d = await getSharePoster({
					_this: this, //若在组件中使用 必传
					backgroundImage: that.$tools.checkImgHttp(that.shareData.store_poster_bg), //接口返回的背景图
					posterCanvasId: this.canvasId, //canvasId
					delayTimeScale: 20, //延时系数
					drawArray: ({ bgObj, type, bgScale }) => {
						const dx = bgObj.width * 0.3;
						const fontSize = bgObj.width * 0.042;
						const lineHeight = bgObj.height * 0.04;
						return new Promise((rs, rj) => {
							rs([
								// 白色圆角矩形
								{
									type: 'roundFillRect',
									backgroundColor: '#fff',
									r: bgObj.width * 0.03,
									width: bgObj.width * 0.9,
									height: bgObj.width * 0.31,
									dx: bgObj.width * 0.05,
									dy: bgObj.height * 0.76
								},
								// 提示图片
								{
									type: 'image',
									url: `${this.$IMG_URL}/poster/store_bg_tip.png`,
									dx: bgObj.width * 0.07,
									dy: bgObj.height * 0.9,
									infoCallBack(imageInfo) {
										return {
											dWidth: bgObj.width * 0.39,
											dHeight: bgObj.width * 0.058
										};
									}
								},
								// 自提点标题
								{
									type: 'text',
									text: that.storeInfo.name,
									size: fontSize,
									color: 'black',
									alpha: 1,
									textAlign: 'left',
									textBaseline: 'middle',
									fontWeight: 'bold',
									infoCallBack(textLength) {
										return {
											dx: bgObj.width * 0.07,
											dy: bgObj.height * 0.8
										};
									}
								},
								// 自提点地址
								{
									type: 'text',
									text: that.storeInfo.address,
									size: fontSize * 0.8,
									color: '#999999',
									alpha: 1,
									textAlign: 'left',
									textBaseline: 'middle',
									lineFeed: {
										maxWidth: bgObj.width * 0.58,
										lineHeight: bgObj.width * 0.05,
										lineNum: 2,
										dx: -1
									},
									infoCallBack(textLength) {
										return {
											dx: bgObj.width * 0.07,
											dy: bgObj.height * 0.84
										};
									}
								},
								// #ifdef MP-WEIXIN
								{
									type: 'image', //微信小程序码
									url: `${that.$API_URL}wechat/wxacode?scene=${that.scene}`,
									alpha: 1,
									drawDelayTime: 500, //draw延时时间
									dx: bgObj.width * 0.7,
									dy: bgObj.height * 0.8,
									infoCallBack(imageInfo) {
										return {
											dWidth: bgObj.width * 0.2,
											dHeight: bgObj.width * 0.2
										};
									}
								}
								// #endif
							]);
						});
					},
					setCanvasWH: ({ bgObj, type, bgScale }) => {
						// 为动态设置画布宽高的方法，
						this.poster = bgObj;
					}
				});
				this.$set(this.poster, 'finalPath', d.poster.tempFilePath);
				this.qrShow = true;
			} catch (e) {
				_app.hideLoading();
				_app.showToast(JSON.stringify(e));
				console.log(JSON.stringify(e));
			}
		},
		// 获取自提点信息
		getStoreDetail() {
			let that = this;
			uni.showLoading({
				title: '数据加载中...',
				mask: true
			});
			return new Promise((resolve, reject) => {
				that.$api('store.detail', {
					id: that.$Route.query.id
				}).then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						that.storeInfo = res.data;
						resolve(res.data);
					}
				});
			});
		},
		saveImage() {
			let that = this;
			let platform = uni.getStorageSync('platform');
			if (platform === 'wxOfficialAccount') {
				that.$tools.toast('长按图片保存');
			} else {
				uni.saveImageToPhotosAlbum({
					filePath: that.poster.finalPath,
					success: res => {
						that.$tools.toast('保存成功');
					},
					fail: err => {
						that.$tools.toast('保存失败');
					}
				});
			}
		},
		hideQr() {
			this.qrShow = false;
		}
	}
};
</script>

<style lang="scss">
.hideCanvasView {
	position: relative;
}

.hideCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}

.content {
	position: relative;
	width: 100%;
	height: 1350rpx;

	.bg_img {
		width: 100%;
		height: 100%;
	}

	.poster-box {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 50rpx;

		.posterImage {
			width: 660rpx;
			border-radius: 30rpx;
		}
	}
}

.share-box {
	width: 750rpx;
	border-radius: 30rpx;
	margin-top: 60rpx;
	.share-list-box {
		.share-btn {
			background: none;
			border: none;
			line-height: 1;
			padding: 0;
			&::after {
				border: none;
			}
		}
		.share-item {
			flex: 1;
			padding-bottom: 20rpx;

			.share-img {
				width: 70rpx;
				height: 70rpx;
				background: rgba(246, 246, 254, 1);
				border-radius: 50%;
				margin-bottom: 20rpx;
			}

			.share-title {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}
</style>
